<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://g.alicdn.com/main-search/new-search-suggest/0.0.5/bundle.css">
		<!-- type="text/javascript" => 将载入的文本作为JS语法解析 => JS语句 -->
		<!-- <script type="text/javascript" src="http://192.168.57.165/2207_php/jsonp/1.js"></script> -->
		<!-- <script type="text/javascript" src="http://192.168.57.165/2207_php/jsonp/2.js"></script> -->
		
		
	</head>
	<body>
		
	</body>
	
	
	<script>
		// JSONP原理:
		// 同源策略是浏览器最核心也最基本的安全功能,但是引入资源(img  link=> css  script => js)不受同源策略的限制(默认不受CORS协议影响) => 利用这个机制是否可以实现跨域访问 =>JSONP
		
		// ## 跨域访问之JSONP
		
		// 原理:引入资源不受同源策略的限制.
		
		// 因为script标签支持跨域访问，所以我们可以创建script标签，src指向一个跨域文件。
		
		// 那么，该跨域文件的响应内容，就变成script标签内的内容了。
		
		// 所以，该内容也可以被理解成是正在被执行的js代码。
		
		// 如果该代码中有一个正在被执行的函数，该函数中又有参数。
		
		// 我们就可以把这个参数理解成服务器传给客户端的数据  (函数的调用)。
		
		// 客户端去定义这个函数，我们就能够对参数做任意处理了
		
		
		// 1. 创建script标签 src指向一个跨域文件 => 向改地址发送请求(http)
		// 2. 对方服务器返回响应内容  函数的调用格式的文本
		// 3. 客户端提前定义函数 
		// 4. 请求的内容载入到script脚本中 作为JS语句执行(函数调用)
		// 配合实现前后端交互
		
		
		
		function fn(data){
			console.log("script载入成功:",data);
		}
		
	</script>
	<!-- 载入3.js => 函数调用 fn([1, 2, 3, 4]) -->
	<script type="text/javascript" src="http://192.168.57.165/2207_php/jsonp/3.js"></script>

</html>
